import { useEffect } from "react";
import { Table, Pagination, TableProps,Space } from "antd";
import { CustomRecord } from '../types';
import { useStore } from "../useStore"
export const DataTable = (): JSX.Element => {
	const [table, getDataList, onPageChange] = useStore((state) => [
		state.table,
		state.getDataList,
		state.onPageChange,
	]);
	//表格项
	const columns: TableProps<CustomRecord>['columns'] = [
		{
			title: '单据编号',
			dataIndex: 'saleNetworkCode',
			key: 'saleNetworkCode',
			width:120,
		},
		{
			title: '事项类型',
			dataIndex: 'contractCode',
			key: 'contractCode',
			width:120,
		},
		{
			title: '事项名称',
			dataIndex: 'contractStatus',
			key: 'contractStatus',
			width:120,
		},
		{
			title: '创建日期',
			dataIndex: 'contractStatusText',
			key: 'contractStatusText',
			width:120,
		},
		{
			title: '事项状态',
			dataIndex: 'deliveryMonth',
			key: 'deliveryMonth',
			width:120,
		},
		{
			title: '备注',
			dataIndex: 'payType',
			key: 'payType',
			width:120,
		},
		{
			title: '操作',
			key: 'operate',
			fixed: 'right',
			width:120,
			render: (text,record) => {
				return (
					<Space>
						{<a>审批</a>}
					</Space>
				);
			}
		},
	];
	const handlePageChange = (current: number, pageSize: number) => {
		const pagination = { ...table.pagination, current, pageSize }
		if (pageSize !== table.pagination.pageSize) {
			pagination.current = 1
			pagination.pageSize = pageSize
		}
		onPageChange(pagination)
	}
	useEffect(() => {
		getDataList()
	}, [])
  return (
		<>
			{/* 表格 */}
			<Table size="small" className="my-2.5" loading={table.isLoading} scroll={{ x: "100%" }} columns={columns} dataSource={table.data} bordered={true}  pagination={false} rowKey={(record) => `${record.keyId}`}></Table>
			{/* 分页 */}
			<Pagination size="small" className="text-end" total={table.total} current={table.pagination.current} pageSize={table.pagination.pageSize} onChange={handlePageChange} showSizeChanger showQuickJumper showTotal={(total: number | string) => `共 ${total} 条`} />
		</>
	);
};